<template>
  <div class="liver-player">
    <div class="video-box" :style="{'background-image':'url('+liveVideo.cover+')'}" @click="addBrowseNum">
      <a class="linker" :href="liveVideo.link">
        <img src="../../assets/img/livePlayer/player.png" alt="">
      </a>
    </div>
    <div class="title">
      <div class="status"><span>●</span>{{liveType | formatLiveType}}</div>
      <div class="name">{{liveVideo.liveTitle}}</div>
    </div>
    <div class="btn" @click="showPrompt">分享视频</div>
  </div>
</template>

<script>
import { uuid } from '@/utils/tool'
import { mapGetters } from 'vuex'
import marketService from 'SERVICE/marketService'
const isIOS = () => {
  var isIphone = navigator.userAgent.includes('iPhone')
  var isIpad = navigator.userAgent.includes('iPad')
  return isIphone || isIpad
}
export default {
  data () {
    return {
      linkerId: '',
      liveId: '',
      liveType: '',
      liveVideo: '',
      friendShareData: '',
      timelineShareData: '',
      shareUuid: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.linkerId = this.$route.query.linkerId
    this.liveId = this.$route.query.liveId
    this.liveType = this.$route.query.liveType
    document.title = this.liveType == 1 ? '视频直播' : '视频录播'
    this.shareUuid = uuid()
    this.getLiveVideo()
    // this.addBrowseNum()
  },
  methods: {
    // 获取直播详情
    getLiveVideo () {
      marketService.getLiveVideo({liveId: this.liveId}).then(res => {
        this.liveVideo = res
        setTimeout(()=> {this.setShare()},2000)
      }).catch(() => {})
    },
    // 显示分享引导
    showPrompt () {
      this.$store.commit('SHARE_PROMPT', true)
    },
    // 设置分享
    async setShare() {
      let host = process.env.VUE_APP_APP_URL
      host = `${host}aw-h5/#/market/livePlayer?agentId=${this.userInfo.agentId}&enterpriseId=${this.userInfo.enterpriseId}&type=${this.liveType}&linkerId=${this.linkerId}&liveId=${this.liveId}&shareUuid=${this.shareUuid}&shareUserId=`
      this.friendShareData = {
        title: this.liveVideo.liveTitle,
        desc: '更多豪礼，尽在直播中',
        imgUrl: this.liveVideo.cover,
        link: host
      }
      this.timelineShareData = {
        title: this.liveVideo.liveTitle,
        desc: '更多豪礼，尽在直播中',
        imgUrl: this.liveVideo.cover,
        link: host
      } 
      this.friendShareData.success = this.timelineShareData.success = this.articleShare
      this.friendShareData.cancel = this.timelineShareData.cancel = this.articleShare
      window.awHelper.wechatHelper.setShare(this.friendShareData, this.timelineShareData)
    },
    // 分享成功之后
    articleShare() {
      setTimeout(()=>{// 成功回调后500毫秒再调接口
        this.shareUuid = uuid()
      }, 500)
    },
    // 直播浏览量
    addBrowseNum () {
      marketService.addBrowseNum({liveId: this.liveId}).then(res => {}).catch(() => {})
    }
  },
  mounted () {
    if (isIOS()) {
      window.onpageshow = function(event) {
        if (event.persisted || (window.performance && window.performance.navigation.type==2)) {
          window.location.reload()
          return
        }
      }
    }
  },
  filters: {
    // 格式化直播状态
    formatLiveType (val) {
      let status = {
        1: '直播中',
        2: '录播中'
      }
      return status[val] || '直播中'
    }
  }
}
</script>

<style lang="less" scoped>
.liver-player{
  font-size: 16px;
  .video-box{
    height:213px;
    width: 100%;
    background:rgba(51,51,51,1);
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    .linker{
      display: block;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img{
      width: 40px;
      height: 40px;
    }
  }
  .title{
    margin: 12px 16px;
    display: flex;
    .status{
      flex-basis:68px;
      background:rgba(255,156,56,1);
      border-radius:10px;
      font-size: 12px;
      color: #fff;
      padding: 4px 0 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        font-size: 8px;
        margin-right: 4px;
      }
    }
    .name{
      flex: 1;
      margin-left: 4px;
      font-size: 16px;
      font-weight: 600;
      line-height:22px;
    }
  }
  .btn{
    height: 44px;
    margin: 25px 16px;
    background:rgba(0,122,230,1);
    border-radius:4px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;
    text-align: center;
  }
}
</style>
